<template>
	<div class="container-wrap">
		<description logo="iconfont icon-gaojingshezhi" :title="title" :desc="desc" />
		<el-card class="table-wrap" shadow="never">
			<el-tabs v-model="activityTab" >
				<el-tab-pane label="告警策略" name="strategy">
					<AlarmStrategy />
				</el-tab-pane>
				<el-tab-pane label="告警通知" name="notice">
					<AlarmNotice />
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue';

const description = defineAsyncComponent(() => import('/@/components/description/index.vue'));
const AlarmStrategy = defineAsyncComponent(() => import('./components/alarmStrategy.vue'));
const AlarmNotice = defineAsyncComponent(() => import('./components/alarmNotice.vue'));

const title = '告警设置';
const desc = '通过配置告警策略和告警通知，实现集群负载、性能的自动化管理和通知';

let activityTab = ref('strategy');

</script>

<style scoped>
:deep(.el-card__body .el-tabs__content){
	overflow: auto;
	max-height: 485px;
}
</style>